<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link href="./css/bootstrap-dialog.min.css"
          rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table-zh-CN.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/bootstrap-dialog.min.js"></script>

</head>
<body>

<!--搜索条件-->
<div class="panel panel-default">
    <div class="panel-body" style="font-size: large">

        <form role="form" id="searchForm" class="form-inline">

            <div class="form-group">
                <label for="goodsName">商品名称:</label>
                <input type="text" class="form-control" id="goodsName" name="goodsName" placeholder="请输入名称">
            </div>

            <div class="form-group">
                <button type="button" id="searchBtn" class="btn btn-info" style="font-size: large;">开始搜索
                </button>
            </div>
            <div class="form-group" style="float:right;margin-right: 10%">
                <button type="button" id="addBtn" class="btn btn-info" style="font-size: large;"
                        onclick="addOrUpdateData()">新增
                </button>
            </div>
        </form>


    </div>


</div>
<!--搜索条件-->


<!--表格-->
<div class="panel panel-default" style="font-size: large">
    <div class="panel-body">
        <table id="table_server"></table>
    </div>
</div>
<!--表格-->


<!-- 新增或编辑的模态窗，页面加载先隐藏 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabelTiTle" style="color: red;">
                    操作
                </h4>
            </div>


            <form role="form" id="" class="" style="font-size: large;padding:15px">
                <input type="hidden" id="id" value="">
                <div class="form-group" style="margin-top: 10px;">
                    <label for="goodsName0">商品名称:</label>
                    <input type="text" class="form-control" id="goodsName0" name="goodsName0" placeholder="请输入名称">
                </div>

                <div class="form-group" style="margin-top: 10px;">
                    <label for="price">价格:</label>
                    <input type="text" class="form-control" id="price" name="price" placeholder="请输入价格">
                </div>
                <div class="form-group" style="margin-top: 10px;">
                    <label for="inventory">库存:</label>
                    <input type="text" class="form-control" id="inventory" name="inventory" placeholder="请输入库存">
                </div>

            </form>


            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="commitDataBtn" onclick="commitData()">
                    提交更改
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 新增或编辑的模态窗，页面加载先隐藏 -->


<script type="text/javascript">


    $(function () {

        var t = $("#table_server").bootstrapTable({
            url: '/little/admin/goods/getGoodsPage',
            method: 'post',
            striped: false,//设置为 true 会有隔行变色效果
            undefinedText: "空",//当数据为 undefined 时显示的字符
            pagination: true, //分页
            contentType: "application/x-www-form-urlencoded",
            paginationLoop: false,//设置为 true 启用分页条无限循环的功能。
            showToggle: false,//是否显示 切换试图（table/card）按钮
            showColumns: false,//是否显示 内容列下拉框
            showPaginationSwitch: false,//是否显示 数据条数选择框
            pageNumber: 1,//如果设置了分页，首页页码
            pageSize: 10,//如果设置了分页，页面数据条数
            pageList: [10, 15, 20, 25],	//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
            paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
            // singleSelect: false,//设置True 将禁止多选
            search: false, //显示搜索框
            data_local: "zh-US",//表格汉化
            sidePagination: "server", //服务端处理分页
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: 'undefined',
            queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
                //这里的params是table提供的
                return {
                    size: params.pageSize,//每页的记录行数
                    current: params.pageNumber,//当前页
                    goodsName: $("#goodsName").val()
                };
            },
            idField: "id",//指定主键列
            //加载成功时执行
            // onLoadSuccess: function (res) {
            //     console.info("加载成功" + JSON.stringify(res))
            //     res = JSON.stringify(res)
            //     if (res.errcode != 0) {
            //         alert(res.errmsg);
            //     }
            // },
            // //加载失败时执行
            // onLoadError: function (res) {
            //     console.info("加载失败" +  JSON.stringify(res))
            //     res = JSON.stringify(res)
            //     if (res.errcode != 0) {
            //         alert("数据加载失败" + res.errmsg);
            //     }
            // },

            dataField: "records", //要映射的字段名称数组
            //在ajax获取到数据，渲染表格之前，修改数据源,可以修改要获得字段名称

            responseHandler: function (result) {
                console.info(result);

                if (result.errcode != 0) {
                    ToastError("数据加载失败" + result.errmsg, 3000);
                }
                return result.data;
            },
            columns: [
                {
                    title: '商品编号',//表的列名
                    field: 'id',//json数据中rows数组中的属性名
                    align: 'center'//水平居中
                },
                {
                    title: '商品名称',
                    field: 'goodsName',
                    align: 'center'
                },
                {
                    title: '价格',
                    field: 'price',
                    align: 'center'
                },
                {
                    title: '库存',
                    field: 'inventory',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    field: 'createTime',
                    align: 'center'
                }
                ,
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        //删除某一行，传入id,或者传入对象注意一定要转码，否则出问题
                        var editBtn = '<button type="button" class="btn btn-primary" style="margin-right: 20px;font-size: 15px" onclick="addOrUpdateData(' + JSON.stringify(row).replace(/"/g, '&quot;') + ')">编辑</button>';
                        var deleteBtn = '<button type="button" class="btn btn-danger" style="font-size: 15px" onclick="deleteData(' + row.id + ',\'' + row.goodsName + '\')">删除</button>';

                        return editBtn + deleteBtn;
                    }

                }
            ]
        });


        t.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
            console.log("load success");
            // $(".pull-right").css("display", "block");
        });

    });


    //搜索点击触发查询分页
    $("#searchBtn").click(function () {

        //刷新分页，保留当前页面
        // $("#table_server").bootstrapTable("refresh");
        //refreshOptions的作用是把pageNumber在页面上置为1，query是把携带的参数一起扔给后端
        //刷新分页，分页从1开始
        $("#table_server").bootstrapTable('refreshOptions',
            {query: {size: 10, current: 1}, pageNumber: 1}
        );

    });


    //点击编辑或新增按钮触发的事件
    function addOrUpdateData(row) {
        console.info(row);
        //首先清除模态框的所有值
        $("#id").val("");
        $("#goodsName0").val("");
        $("#price").val("");
        $("#inventory").val("");

        if (row == null) {
            $("#myModalLabelTiTle").html('新增操作');
        } else {
            $("#myModalLabelTiTle").html('编辑操作');
        }
        //显示模态窗口
        $("#myModal").modal('show');
        if (row != null) {
            $("#id").val(row.id);
            //从传递的方法里面获取，对应的值，获取调用商品详情的接口也可以
            $("#goodsName0").val(row.goodsName);
            $("#price").val(row.price);
            $("#inventory").val(row.inventory);
        }


    }

    //点击提交按钮触发的事件
    function commitData() {

        var id = $("#id").val();
        var goodsName = $("#goodsName0").val();
        var price = $("#price").val();
        var inventory = $("#inventory").val();
        if (goodsName == null || goodsName === '') {
            ToastError("请输入商品名称");
            return;
        }
        if (price == null || price === '') {
            ToastError("请输入商品价格",3000);
            return;
        }
        if (inventory == null || inventory === '') {
            ToastError("请输入商品库存",3000);
            return;
        }
         //isNaN为false才是数字
        if (isNaN(inventory) || inventory >= 200000000||inventory<=0||!(parseInt(inventory)==inventory)) {
            ToastError("库存必须是正整数,大于0且小于等于2亿",3000);
            return;
        }
        if (!isPrice(price)|| (parseInt(price)<0||parseInt(price)>=200000000)) {
            ToastError("请输入正确的商品价格:正整数或者保留两位小数,大于0且小于等于2亿",3000);
            return;
        }




        //按钮失效避免重复提交
        $("#commitDataBtn").attr({"disabled": true}).html("正在提交..");

        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/little/admin/goods/addOrUpdateGoods?id=" + id + "&goodsName=" + goodsName + "&price=" + price + "&inventory=" + inventory,
            //数据，json字符串
            data: "",
            //请求成功
            success: function (result) {

                if (result.errcode == 0) {
                    //刷新分页，保留当前页面
                    ToastSuccess();
                    $("#myModal").modal('hide');
                    $("#table_server").bootstrapTable("refresh");
                } else {
                    ToastError(result.errmsg, 3000);
                }

                $("#commitDataBtn").attr({"disabled": false}).html("提交更改");
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
                alert(e.status + "  " + e.responseText);
                $("#commitDataBtn").attr({"disabled": false}).html("提交更改");
            }
        });
    }


    //点击删除按钮触发的事件
    function deleteData(id, goodsName) {


        BootstrapDialog.confirm({
            title: '你确定要删除"' + goodsName + '"?',
            message: '',
            size: BootstrapDialog.SIZE_NORMAL,
            type: BootstrapDialog.TYPE_DANGER, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: true, // <-- Default value is false
            draggable: true, // <-- Default value is false
            btnCancelLabel: '取消', // <-- Default value is 'Cancel',
            btnOKLabel: '确定', // <-- Default value is 'OK',
            // btnOKClass: 'btn-info', // <-- If you didn't specify it, dialog type will be used,
            callback: function (result) {
                // result will be true if button was click, while it will be false if users close the dialog directly.
                if (result) {
                    $.ajax({
                        //请求方式
                        type: "POST",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: "/little/admin/goods/deleteGoods?id=" + id,
                        //数据，json字符串
                        data: "",
                        //请求成功
                        success: function (result) {

                            if (result.errcode == 0) {
                                //刷新分页，保留当前页面
                                ToastSuccess();
                                $("#table_server").bootstrapTable("refresh");
                            } else {
                                ToastError(result.errmsg, 3000);
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error: function (e) {
                            console.log(e.status);
                            console.log(e.responseText);
                            alert(e.status + "  " + e.responseText)
                        }
                    });
                }
            }
        });


    }


</script>

</body>
</html>